<template>
  <div class="service">
    <div
      class="flex justify-between items-center p-4 border-b border-gray-700 w-full"
    >
      <div></div>
      <div class="text-lg text-[#fff] text-center">
        {{ $t("page.navbar.customerService") }}
      </div>
      <van-icon
        @click="closeLayer"
        class="cursor-pointer text-[#fff]"
        name="cross"
      />
    </div>
    <iframe
      sandbox="allow-scripts allow-same-origin"
      :src="main.customerService"
      frameborder="0"
      class="customer-service"
    ></iframe>
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { mainAct } from "@/store/activeda";

const main = mainAct();
const router = useRouter();
const emit = defineEmits(["openWallet"]);
const goToWallet = () => {
  main.checkActLayer = false;
};
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const closeLayer = () => {
  //   main.showService = false;
  router.go(-1);
};

onMounted(() => {});
</script>
<style scoped lang="less">
@media (min-width: 600px) {
}
.layer {
  // width: 375px;
  /*width: 100%;*/
  /*height: 100%;*/
  background-color: #0f212e;
  color: #b1bad3;
  position: relative;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tab-active {
  background-color: #2f4553;
  color: #fff;
}
.tab-inactive {
  color: #fff;
}

.service {
  width: 100%;
  height: 100svh;
  z-index: 99999;
}

.customer-service {
  width: 100%;
  height: 100%;
  resize: none; /* 禁止缩放 */
}
</style>
